<template>
    <div class="vdata">
        <h2>data</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            这里的data分为两种<br>
            第一种是vm（即new Vue({})）中的data，比如main.js中的那个。<br>
            第二种是vc（即Vue.extend({})）中的data<br>
            这两种data，虽然目的相同，但是在实际写法上，会有不同。<br>
            第一种的data是对象，即data: {val: 1}，<br>
            第二种的data是函数，即data()  { return {val: 1} }<br>
            记住，在所有的组件中，都是用第二种data。<br>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'Vdata',
    mixins: [mixinPage],
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>